﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Input, Number Input, Currency Input, Percentage Input, Floating-Point Input, Decimal Input, jqxNumberInput" /> 
    <meta name="description" content="Number Input Templates" />
    <title id='Description'>Number Input Templates.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxNumberInput
            $("#numericInput").jqxNumberInput({ width: '250px', height: '25px', spinButtons: true });
            $("#numericInput2").jqxNumberInput({ template: "primary", width: '250px', height: '25px', spinButtons: true });
            $("#numericInput3").jqxNumberInput({ template: "success", width: '250px', height: '25px', spinButtons: true });
            $("#numericInput4").jqxNumberInput({ template: "info", width: '250px', height: '25px', spinButtons: true });
            $("#numericInput5").jqxNumberInput({ template: "warning", width: '250px', height: '25px', spinButtons: true });
            $("#numericInput6").jqxNumberInput({ template: "danger", width: '250px', height: '25px', spinButtons: true });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style='margin-top: 10px;'>
            Default</div>
        <div style='margin-top: 3px;' id='numericInput'>
        </div>
         <div style='margin-top: 10px;'>
            Primary</div>
        <div style='margin-top: 3px;' id='numericInput2'>
        </div>
              <div style='margin-top: 10px;'>
            Success</div>
        <div style='margin-top: 3px;' id='numericInput3'>
        </div>
        <div style='margin-top: 10px;'>
            Info
        </div>
        <div style='margin-top: 3px;' id='numericInput4'>
        </div>
          <div style='margin-top: 10px;'>
            Warning
        </div>
       <div style='margin-top: 3px;' id='numericInput5'>
        </div>
          <div style='margin-top: 10px;'>
            Danger
        </div>
       <div style='margin-top: 3px;' id='numericInput6'>
        </div>
    </div>
</body>
</html>